<template>
  <view class="wrapper">
    <view class="swipper_wrp" v-if="carousels.length">
      <u-swiper :list="carousels" :height="268" name="imageUrl" :border-radius="0" @click="swiperJump"></u-swiper>
    </view>
    <view class="top" v-if="!carousels.length">
      <img src="https://app.zbzedu.com/static/WaChat/img/user_bg.png" alt="">
    </view>
    <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;">
      <u-input v-model="queryform.specialtyName"
               :clearable="false"
               confirm-type="search"
               @confirm="search"
               class="flex-1 fon4-24 pd_l_30 pd_r_30" :height="50" placeholder="请输入专业名称进行搜索"/>
      <view class="btn color-active" @click="search">搜索</view>
    </view>
    <view class="dropdown yh_bd_bottom">
      <drop-menu :options="options" @choose="chooseBack"
                 v-if="showFilter"
                 :provinceNameData="provinceNameData"
                 :uOrSData="uOrSData"
                 :yearData="yearData"
                 defautlProvince></drop-menu>
    </view>
    <view class="main flex-1 row">
      <scroll-view scroll-y style="height: 100%" @scrolltolower="loadMore">
        <u-cell-group>
          <u-cell-item :title="item.specialty_name + '(' + item.specialty_code + ')'" v-if="index < queryform.pageSize * queryform.pageNum"
                       v-for="(item, index) in list" value="选科要求"
                       :key="index"
                       @click="toDetail(item.specialty_code)"></u-cell-item>
        </u-cell-group>
        <uni-load-more :status="loadStatus" v-if="list.length == queryform.pageSize * queryform.pageNum"></uni-load-more>
        <u-empty text="暂无数据" mode="list" v-if="!list.length"></u-empty>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
  import {request} from "@/util/api";
  import dropMenu from '@/components/my_dropmenu/index'
  import {SWIPER_JUMP} from "@/util/util";

  export default {
    components: {
      uniLoadMore,
      dropMenu
    },

    onLoad(option) {
      if (option.seachvalue) {
        this.queryform.specialtyName = option.seachvalue
      }
      this.getSwiper()
      this.getList()
    },

    data() {
      return {
        value:'',
        loadStatus: 'more',
        queryform: {
          pageSize: 20,
          pageNum: 1
        },
        list: [],
        options: ['provinceName', 'year', 'uOrS'],
        provinceNameData: [],
        uOrSData: [],
        yearData: [],
        showFilter: false,
        carousels: []
      }
    },

    methods: {
      swiperJump(res) {
        SWIPER_JUMP(this.carousels[res].linkUrl)
      },
      getSwiper() {
        request({
          url: '/system/wx/rotationImage/list',
          token: true
        }).then(res => {
          this.carousels = res.data.filter(item => item.rotationType == '选科要求')
        })
      },
      toDetail(res) {
        this.$u.route({
          url: `/pages/explore/xuanke_detail?code=${res}&admissionsAddress=${this.queryform.admissionsAddress}&year=${this.queryform.year}&uOrS=${this.queryform.uOrS}`
        })
      },

      // 加载更多
      loadMore() {
        this.queryform.pageNum+=1
        this.getList()
      },

      getList() {
        this.loadStatus = 'loading'
        request({
          url: '/system/wx/CompassChangeSubject/getListForQuery',
          token: true,
          data: this.queryform
        }).then(res => {
          let {addressList, changeSubjectList, typeList, yearList} = res.data
          this.list = changeSubjectList
          this.loadStatus = 'more'

          this.provinceNameData = addressList.map(item => {
            return {dictValue: item}
          })
          this.uOrSData = typeList.map(item => {
            return {dictValue: item}
          })
          this.yearData = yearList.map(item => {
            return {dictValue: item}
          })
          this.showFilter = true
        })
      },

      chooseBack(res) {
        res.admissionsAddress = res.provinceName || ''
        res.uorS = res.uOrS || ''
        this.queryform = Object.assign(this.queryform, res)
        this.getList()
      },

      search() {
        this.queryform.pageNum = 1
        this.list = []
        this.getList()
      }
    },

    onShareAppMessage(res) {}
  }
</script>

<style scoped lang="scss">

  page {
    height: 100%;
  }
  .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 280upx;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .search {
      background:  rgba(249, 249, 249, 100);
      padding-top: 20upx;
      padding-bottom: 20upx;
      .flex-1 {
        background: #fff;
        border-radius: 25upx;
        margin-right: 20upx;
      }
    }
    .main {
      width: 100%;
      flex: 1;
      height: 100%;
    }
  }
</style>
